/**
 * Created by Administrator on 2016/7/14.
 */
window.onload=function(){
    //左侧滑动
    leftSwiper();
    //右侧滑动
    rightSwiper();
}


function leftSwiper(){
    //1滑动
    //2滑动到一定距离不能在允许滑动   滑动区间.
    //3滑动超过了0 最小定位 需要让它定位回去   吸附    定位区间
    //4点击改变当前样式
    //5点击的时候需要定位在顶部 当不满足条件的时候要固定    点的到底哪个盒子

    //获取dom元素
    var parentDom=document.querySelector(".jd_cate_left");
    var childDom=parentDom.querySelector("ul");
    //所有的li
    var lis=childDom.querySelectorAll("li");
    //需要父盒子和子盒子的高度
    var parentHeight=parentDom.offsetHeight;
    var childHeight=childDom.offsetHeight;
    //计算定位区间
    var maxPosition=0;
    var minPosition=parentHeight-childHeight;
    //缓冲距离
    var distance=150;
    //滑动区间
    var maxSwiper=maxPosition+distance;
    var minSwiper=minPosition-distance;


    //程序的核心点    当前的定位
    var currY=0; //***初始化的位置


    //公用方法
    //加过渡
    var addTransition=function(){
        childDom.style.webkitTransition="all 0.5s";
        childDom.style.transition="all 0.5s";
    }
    //清除过度
    var removeTtansition=function(){
        childDom.style.weblitTransition="none";
        childDom.style.transition="none";
    }
    //定位
    var setTranslateY=function(translateY){
        childDom.style.webkitTransform="translateY("+translateY+"px)";
        childDom.style.transform="translateY("+translateY+"px)";
    }


    //1滑动`
    var startY=0;
    var moveY=0;
    var distanceY=0;
    var isMove=false;


    childDom.addEventListener("touchstart",function(e){
        startY= e.touches[0].clientY;
    })
    childDom.addEventListener("touchmove",function(e){
        moveY= e.touches[0].clientY;
        distanceY=moveY-startY;
        //清除过渡
        removeTtansition();

        //2滑动到一定距离不能在允许滑动   滑动区间.
        if((currY+distanceY)>minSwiper && (currY+distanceY)<maxSwiper){
            //定位
            setTranslateY(currY+distanceY);
        }


        //设置为已滑动过
        isMove=true;
    })
    childDom.addEventListener("touchend",function(e){
        //3滑动超过了0 最小定位 需要让它定位回去   吸附    定位区间
        if((currY+distanceY)>maxPosition){
            currY=maxPosition;
            //加过度
            addTransition();
            //定位
            setTranslateY(currY);
        }else if((currY+distanceY)<minPosition){
            currY=minPosition;
            //加过度
            addTransition();
            //定位
            setTranslateY(currY);
        }else {
            //正常情况
            currY=currY+distanceY
        }





        //重置参数
        startY=0;
        moveY=0;
        distanceY=0;
        isMove=false;
    });
    //tap
    libin.tap(childDom,function(e){
        //怎样通过父元素获取子元素
        //target    目标元素
        //4点击改变当前样式
        var currLi= e.target.parentNode;
        for(var i=0;i<lis.length;i++){
            lis[i].classList.remove("now");
            lis[i].index=i;
        }
        currLi.classList.add("now");

        //5点击的时候需要定位在顶部 当不满足条件的时候要固定    点的到底哪个盒子

        //计算将要去做定位的位置
        var translateY=-currLi.index*50;
        //addTransition();
        //setTranslateY(translateY);
        //在定位区间内运动
        if(translateY>minPosition){
            //要记录当前的currY
            currY=translateY;
            addTransition();
            setTranslateY(currY);
        }else {
            currY=minPosition;
            addTransition();
            setTranslateY(currY);
        }

    });


};
function rightSwiper(){
    libin.iScroll({
        swipeDom:document.querySelector('.jd_cate_right'),
        swipeType:'y',
        swipeDistance:100
    })
}






